<template>
    <div class="signature-box">
        <p>添加或者更改您的签名</p>
        <p>从电脑中选择一项你喜欢的照片上传，仅支持JPEG、GIF或PNG图片文件，且大小不超过2M。</p>
        <div>
            <my-image-upload :upload-params="ossParams"  :img-url="imageUrl" @change="val => handleChangeUpload(val, 'imageUrl')"></my-image-upload>
        </div>
        <div class="btn-box">
            <el-button type="primary" @click="updateDoctorSign">提交</el-button>
        </div>
    </div>
</template>

<script>
import myImageUpload from '@/components/image-upload/image-upload'
export default {
    name: 'setSignature',
    components: {
        myImageUpload
    },
    data() {
        return {
            imageUrl: '',
            ossParams: '',
        }
    },
    mounted() {
        this.ossimg();
    },
    methods: {
         // 上传图片
        handleChangeUpload(val, key) {
            this.imageUrl = val;
        },
        updateDoctorSign() {
            this.$ajax.updateDoctorSign({doctorAutograph: this.imageUrl}).then(res => {
                if (res.code === 1) {
                    this.$util.message(res.msg,'success');
                }
            }).catch(err => {
                this.$util.message(err.msg,'error')
            })
        },
        ossimg(){
            this.$ajax.uploadFileBridge({
                dir: 'webpc/'
            }).then(res => {
                let {code, data} = res
                if (code === 1) {
                    this.ossParams = JSON.stringify(data)
                }
            }).catch(err => {
                this.$util.message(err.msg)
            })
        },
    }
}
</script>

<style lang='scss'>
    .signature-box {
        > p {
            margin-bottom: 20px;
            &:first-of-type {
                color: #3C3C3C;
                font-size: 16px;
            }
            &:last-of-type {
                color: #757575;
                font-size: 13px;
            }
        }
    }
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }
    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
</style>
